<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-18 09:34:22
 * @LastEditTime: 2023-11-10 15:01:09
-->
<template>
    <div class="receive1">
        <div class="receive2">
            <div>
                <span style="font-weight: 700;">{{ $t('text.Contract.l128') }}</span>
                <span class="tag1" v-if="status == 0">{{ $t('text.Contract.l14') }}</span>
                <span class="tag2" v-if="status == 1">{{ $t('text.Contract.l20') }}</span>
                <span class="tag3" v-if="status == 2">{{ $t('text.Contract.l21') }}</span>
            </div>
            <DialogLayout50 :params="dataList" @returnData="getdata">
                <el-button round style="height: 28px;color: #6698ff;border: 1px solid #6698ff;">{{ $t('text.Contract.l128')
                }}</el-button>
            </DialogLayout50>
        </div>

        <div class="ov">
            <table class="receive3">
                <tr class="receive4">
                    <td class="receive5">{{ $t('text.Contract.l151') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l152') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l153') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l154') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l155') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l156') }}</td>
                    <td class="receive5">{{ $t('text.Contract.l157') }}</td>
                </tr>
                <tr v-for="item in dataList" :key="item">
                    <td class="receive6">{{ item.subjectName == null ? '-' : item.subjectName }}</td>
                    <td class="receive6">{{ item.mustPrice == null ? '-' : item.mustPrice }}</td>

                    <td class="receive6">
                        {{ item.fromType == null ? '-' : '' }}
                        {{ item.fromType == '0' ? $t('text.Contract.l337') : '' }}
                        {{ item.fromType == '1' ? $t('text.Contract.l338') : '' }}
                    </td>

                    <td class="receive6">{{ item.realPrice == null ? '-' : item.realPrice }}</td>
                    <td class="receive6">{{ item.surplusPrice == null ? '-' : item.surplusPrice }}</td>

                    <td class="receive6">{{ item.received ? $t('text.Contract.l339') : $t('text.Contract.l340') }}</td>

                    <td class="receive6">
                        {{ item.shareMethod == null ? '-' : '' }}
                        {{ item.shareMethod == '0' ? $t('text.Contract.l341') : '' }}
                        {{ item.shareMethod == '1' ? $t('text.Contract.l342') : '' }}
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
    
<script>
import { findMustByContractId } from '../../http/api'
export default {
    name: "ReceivableManage",
    props: {
        status: [String, Number]
    },
    components: {},
    data() {
        return {
            dataList: []
        }
    },
    mounted() {
        this.getdata()
    },
    methods: {
        getdata() {
            findMustByContractId({ contractId: this.$route.query.id }).then(res => {
                if (res !== undefined) {
                    this.dataList = res
                    console.log(res)
                }
            }).catch()
        }
    },
    watch: {},
    computed: {},
}
</script>

<style scoped>
.ov {
    overflow: auto;
    flex: 1;
    margin-top: 15px;
    margin-bottom: 30px;
    background: #f0f0f0;
    border-radius: 4px;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f6868629;
    border: 1px solid #f68686;
    color: #f68686;
    white-space: nowrap;
    height: 26px;
    margin: 5px 10px;
    padding: 2px 5px;
}

.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #54d2d029;
    border: 1px solid #54d2d0;
    color: #54d2d0;
    white-space: nowrap;
    height: 26px;
    margin: 5px 10px;
    padding: 2px 5px;
}

.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #518aff29;
    border: 1px solid #518aff;
    color: #518aff;
    white-space: nowrap;
    height: 26px;
    margin: 5px 10px;
    padding: 2px 5px;
}
.receive1 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    overflow: hidden;
}

.receive2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.receive3 {
    font-size: 13px;
    width: 100%;
    border-spacing: 0;
    padding: 0 20px;
}

.receive4 {
    position: sticky;
    top: 0;
    font-weight: 600;
}

.receive5 {
    background: #f0f0f0;
    border-bottom: 1px solid #bbb;
    height: 45px;
    position: sticky;
    top: 0;
    text-align: left;
    width: 14%;
}

.receive6 {
    border-bottom: 1px solid #ddd;
    height: 45px;
    text-align: left;
    width: 14%;
}
</style>